<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/12/21 0021
  Time: 9:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>json对象</title>
</head>
<body>
<div id="textDiv"></div>
<ul style="list-style-type: none" id="ulDiv"></ul>
<select id="selectDiv"></select>
<table id="tableDiv">
    <tr>
        <td>用户名&nbsp;&nbsp;</td>
        <td>年龄&nbsp;&nbsp;</td>
        <td>密码</td>
    </tr>
</table>

<script src="../js/jquery-1.8.3.min.js"></script>
<script>
    var user={
        name:"WSQ",
        age:21
    };
    $("#textDiv").append("用户名："+user.name);
    $("#textDiv").append("年龄："+user.age);

    var coutry=[
        "中国","美国","俄国"
    ];

    for(var i=0;i<coutry.length;i++){
        var $selectDiv=$("#selectDiv");
        var $ulDiv=$("#ulDiv");
        $ulDiv.append("<li>"+coutry[i]+"</li>")
        $selectDiv.append("<option value='"+i+"'>"+coutry[i]+"</option>")
    }
    var $tableDiv=$("#tableDiv");
    var tableArray=[
        {
            name:"111",
            age:21,
            pwd:"111"
        },
        {
            name:"222",
            age:21,
            pwd:"222"
        },
        {
            name:"333",
            age:21,
            pwd:"333"
        }
    ]
    for(var i=0;i<tableArray.length;i++){
        $tableDiv.append("<tr><td>"+tableArray[i].name+"&nbsp;&nbsp;</td><td>"+tableArray[i].age+"&nbsp;&nbsp;</td><td>"+tableArray[i].pwd+"</td></tr>")
    }

</script>

</body>
</html>
